<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>视频</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../default/css/index.css"/>
    <link rel="stylesheet" href="../default/css/animat.min.css">
    <link rel="stylesheet" type="text/css" href="../default/css/zy.media.min.css"/>

    <style>
        .mui-bar ~ .mui-content .mui-fullscreen {
            top: 20px;
            height: auto;
        }

        .mui-pull-top-tips {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -25px;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            z-index: 1;
        }

        .mui-bar ~ .mui-pull-top-tips {
            top: 24px;
        }

        .mui-pull-top-wrapper {
            width: 42px;
            height: 42px;
            display: block;
            text-align: center;
            background-color: #efeff4;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            box-shadow: 0 4px 10px #bbb;
            overflow: hidden;
        }

        .mui-pull-top-tips.mui-transitioning {
            -webkit-transition-duration: 200ms;
            transition-duration: 200ms;
        }

        .mui-pull-top-tips .mui-pull-loading {
            /*-webkit-backface-visibility: hidden;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;*/

            margin: 0;
        }

        .mui-pull-top-wrapper .mui-icon,
        .mui-pull-top-wrapper .mui-spinner {
            margin-top: 7px;
        }

        .mui-pull-top-wrapper .mui-icon.mui-reverse {
            /*-webkit-transform: rotate(180deg) translateZ(0);*/
        }

        .mui-pull-bottom-tips {
            text-align: center;
            background-color: #efeff4;
            font-size: 15px;
            line-height: 40px;
            color: #777;
        }

        .mui-pull-top-canvas {
            overflow: hidden;
            background-color: #fafafa;
            border-radius: 40px;
            box-shadow: 0 4px 10px #bbb;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

        .mui-pull-top-canvas canvas {
            width: 40px;
        }

        .mui-slider-indicator.mui-segmented-control {
            background-color: #efeff4;
        }

        .mui-slider-indicator.mui-segmented-control {
            background: #fff;
            padding: 0 10px 0 10px;
            z-index: 999;
        }

        .mui-fullscreen .mui-segmented-control ~ .mui-slider-group {
            top: 37px;
            bottom: 50px;
        }

        .mui-table-view-cell:after {
            right: 15px;
            height: 0;
        }

        .mui-table-view-cell {
            padding: 0;
            margin: 30px auto;
        }

        .mui-content {
            background: #fff;
        }

        .mui-content-padded img {
            border-radius: 5px;
        }

        .gold-coin-box {
            width: 60px;
            height: 100px;
            /*background: #fff;*/
            /*-moz-box-shadow: 0px 4px 16px #333333;*/
            /*-webkit-box-shadow: 0px 4px 16px #333333;*/
            /*box-shadow: 0px 4px 16px #333333;*/
            /*border-radius: 50%;*/
            /*-webkit-border-radius: 50%;*/
            /*-moz-border-radius: 50%;*/
            /*-ms_border-radius: 50%;*/
            display: inline-block;
            position: fixed;
            background: url("https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/gold-coin-1.png") no-repeat;
            background-size: 100% 100%;
            right: 20px;
            bottom: 60px;
            z-index: 55;
            /*animation: heart 1.3s ease-in-out 2.7s infinite alternate;*/


            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            -webkit-animation: rotate 3s linear infinite;
            -moz-animation: rotate 3s linear infinite;
            -o-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite;
        }
        .rotary-animation{
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            -webkit-animation: rotate 3s linear infinite;
            -moz-animation: rotate 3s linear infinite;
            -o-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite;
        }
        @keyframes heart{
            from{transform:translate(0,0)}
            to{transform:translate(0,6px)}
        }
        @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
            to{-webkit-transform: rotate(360deg)}
        }
        @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
            to{-moz-transform: rotate(359deg)}
        }
        @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
            to{-o-transform: rotate(359deg)}
        }
        @keyframes rotate{from{transform: rotate(0deg)}
            to{transform: rotate(359deg)}
        }
        .hundred-buju{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .gold-coin-bo_in {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms_border-radius: 50%;
            overflow: hidden;
            position: relative;
        }

        .gold-coin-bo-c {
            width: 60px;
            height: 60px;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 0;
            background: rgba(253, 194, 35, 0.7);
        }

        .zy_timeline_loaded {
            height: 3px;
        }

        .zy_timeline_current {
            height: 3px;
        }

        .zy_timeline_handle {
            z-index: 50;
        }

        .zy_timeline_slider {
            height: 3px;
        }
    </style>
</head>

<body>
<!-- 1，全都要获取视频的时间进度，然后算钱https://blog.csdn.net/sinat_35645479/article/details/79780923 -->

<div class="mui-content">
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl"
             class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" href="#item1mobile">
                    推荐
                </a>
                <a class="mui-control-item" href="#item2mobile">
                    热点
                </a>
                <a class="mui-control-item" href="#item3mobile">
                    上饶
                </a>
                <a class="mui-control-item" href="#item4mobile">
                    社会
                </a>
                <a class="mui-control-item" href="#item5mobile">
                    娱乐
                </a>
                <a class="mui-control-item" href="#item6mobile">
                    科技
                </a>
            </div>
        </div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div id="scroll2" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="item3mobile" class="mui-slider-item mui-control-content">
                <div id="scroll3" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="item4mobile" class="mui-slider-item mui-control-content">
                <div id="scroll4" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="item5mobile" class="mui-slider-item mui-control-content">
                <div id="scroll5" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="item6mobile" class="mui-slider-item mui-control-content">
                <div id="scroll6" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--任务菜单-->
    <div class="modtai-control-box">
        <div class="day-task-box">
            <div class="day-task-icon-clos mui-text-right"><i class="mui-icon mui-icon-closeempty"></i></div>
            <div class="day-task-title">
                <h4>今日阅读任务</h4>
                <p>进度条达到100%，将获得额外奖励</p>
            </div>
            <div class="day-task-progressbar-box mui-text-right">
                <span class="mui-badge mui-badge-primary">12</span>
                <div id="demo1" class="mui-progressbar">
                    <span></span>
                </div>
            </div>
            <div class="day-task-centan">
                <div><i class="mui-icon icon iconfont icon-xinwen"></i><span>看文章</span><span>13%</span></div>
                <div><i class="mui-icon icon iconfont icon-shipin"></i><span>看视频</span><span>98%</span></div>
            </div>
            <div class="day-task-shuo">
                <h4>规则介绍</h4>
                <p>1，这里是规则规则规则</p>
                <p>2，这里是规则规则规则</p>
                <p>3，这里是规则规则规则</p>
            </div>
            <div class="day-task-subm-box">
                <button type="button" class="mui-btn mui-text-right">继续阅读</button>
            </div>
        </div>
    </div>
    <div class="modtai modtai-control-hied"></div>


</div>

<!-- 底部导航 -->

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="../../index.html">
        <span class="mui-icon icon iconfont icon-xinwen"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item mui-active " href="./video.html">
				<span class="mui-icon icon iconfont icon-shipin">
					<!-- <span class="mui-badge">9</span> --></span>
        <span class="mui-tab-label">视频</span>
    </a>
    <a class="mui-tab-item" href="./shop.html">
        <span class="mui-icon icon iconfont icon-shangcheng"></span>
        <span class="mui-tab-label">阅读宝商城</span>
    </a>
    <a class="mui-tab-item" href="./task.html">
        <span class="mui-icon icon iconfont icon-task"></span>
        <span class="mui-tab-label">任务</span>

    </a>
</nav>


<!--阅读宝-->
<!--<div class="gold-coin-box modtai-control-show">
    <div class="gold-coin-bo_in">
        <div class="gold-coin-bo-c"></div>
        &lt;!&ndash;<div class="gold-coin-b_num">43%</div>&ndash;&gt;
    </div>
</div>-->

<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script src="../default/js/mui.pullToRefresh.js"></script>
<script src="../default/js/mui.pullToRefresh.material.js"></script>
<!--<script src="../default/js/vconsole.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../default/js/zy.media.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="../default/js/cookie.js"></script>-->
<!---->
<script>
    /* var wxopenIdJsonStr = localStorage.getItem("wxopenId");
     var wxouserIdJsonStr = localStorage.getItem("wxouserId");
     // 取值时：把获取到的Json字符串转换回对象
     var wikiLocalContent1 = JSON.parse(wxopenIdJsonStr);
     var wikiLocalContent2 = JSON.parse(wxouserIdJsonStr);
     console.log(wikiLocalContent1);
     console.log(wikiLocalContent2);
 */
    /*var bbb = localStorage.getItem("aaa");
    localStorage.removeItem("aaa");
    console.log(bbb);*/
    mui.init({

    });

    mui('.mui-slider').slider().stopped = true;
    // 监听列表的上滑事件
    mui("#slider").on('swipeup', '.mui-slider-group', function () {

    });
    // 监听列表的下滑事件
    mui("#slider").on('swipedown', '.mui-slider-group', function () {

    });
    mui('.mui-bar-tab').on('tap', 'a', function (e) {
        if($(this).is('.no')){
            mui.toast('暂未开放');
        }else{
            mui.openWindow({
                url: $(this).attr('href')
            });
        }
    });


    /*mui('.mui-slider-group').on('tap', '.zy_playpause_btn', function(e) {
        console.log(1111);
    });*/

    (function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration: deceleration
        });

        $.ready(function () {

            logic();
            /*mui(".mui-scroll").on('tap', 'a', function () {
                logic();
            });*/
            document.getElementById('slider').addEventListener('tap', function (e) {
                // 这里可以获得标题
                setTimeout(function () {
                    logic();
                },100)

            });
            /*var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
            $('.mui-input-group').on('change', 'input', function () {
                if (this.checked) {
                    sliderSegmentedControl.className =
                        'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
                    //force repaint
                    sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
                }
            });*/
            //循环初始化所有下拉刷新，上拉加载。
            $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    /*down: {
                        callback: function () {
                            var self = this;
                            if (self.element.querySelector('.mui-table-view') != null) {
                                setTimeout(function () {
                                    // var ul = document.createElement('ul');
                                    // ul.className = 'mui-table-view';
                                    ul = self.element.querySelector('.mui-table-view');
                                    console.log(self.element.querySelector('.mui-table-view'));
                                    ul.insertBefore(createFragment(ul, index, 3, true), ul.firstChild);
                                    self.endPullDownToRefresh();
                                    mui.toast("为你推荐了3篇文章");
                                    zymedia('video');
                                    pageStatus();
                                }, 1000);
                            }
                        }
                    },
                    up: {
                        callback: function () {
                            var self = this;
                            if (self.element.querySelector('.mui-table-view') != null) {
                                setTimeout(function () {
                                    // var ul = document.createElement('ul');
                                    // ul.className = 'mui-table-view';
                                    ul = self.element.querySelector('.mui-table-view');
                                    ul.appendChild(createFragment(ul, index, 1));
                                    self.endPullUpToRefresh();
                                    zymedia('video');
                                    pageStatus();
                                }, 1000);
                            }
                        }
                    }*/
                });
            });
            var createFragment = function (ul, index, count, reverse) {
                var length = ul.querySelectorAll('li').length;
                var fragment = document.createDocumentFragment();
                var li;
                var lilist = '';
                for (var i = 0; i < count; i++) {
                    li = document.createElement('li');
                    li.className = 'mui-table-view-cell';
                    li.innerHTML = '<div class="zy_media">' +
                        '<video poster="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/void/void-poster.jpg" webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow" data-config=\'{"mediaTitle": "枢纽科技"}\' >' +
                        '<source src="http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v" type="video/mp4">' +
                        '您的浏览器不支持HTML5视频' +
                        '</video>' +
                        '</div>';
                    fragment.appendChild(li);
                }

                // rotary-animation
                console.log(this);
                return fragment;

            };
        });
    })(mui);


    // 显示
    mui("body").on('tap', '.modtai-control-show', function () {
        $('.modtai-control-hied').css('display', 'block');
        $('.modtai-control-box').css('display', 'inline-table');
        $('.modtai-control-box').addClass('animated fadeInUp');
        setTimeout(function () {
            $('.modtai-control-box').removeClass('animated fadeInUp');
        }, 500)
    });
    // 隐藏
    mui("body").on('tap', '.modtai-control-hied', function () {
        $('.modtai-control-hied').css('display', 'none');
        $('.modtai-control-box').addClass('animated fadeOutDown');
        setTimeout(function () {
            $('.modtai-control-box').css('display', 'none');
            $('.modtai-control-box').removeClass('animated fadeOutDown');
        }, 500)

    });
    mui("body").on('tap', '.mui-text-right', function () {
        $('.modtai-control-hied').css('display', 'none');
        $('.modtai-control-box').addClass('animated fadeOutDown');
        setTimeout(function () {
            $('.modtai-control-box').css('display', 'none');
            $('.modtai-control-box').removeClass('animated fadeOutDown');
        }, 500)

    });

    // 进度条初始化
    mui("#demo1").progressbar({progress: 20}).show();
    // 更改显示进度条:
    mui("#demo1").progressbar().setProgress(50);


    /* self.setStyle({
        videoFullscreen: 'landscape'
    }); */

    function logic() {
        // 先加载必要的数据,在进行下上加载操纵
        var num = [{
            id: 1,
            name: '玩58新媒体吧',
            time: 'Posted on January 18, 2019',
            imgsrc:'https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/void/void.png',
            video: 'https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/void/void.mp4',
            footname: '玩58新媒体吧',
            foottime: '5分钟前'
        }];
        var html = '';
        var item = $(".mui-active")[1];
        if (item.querySelector('.mui-loading')) {

            var html = '<ul class="mui-table-view">';
            for (var i = 0; i < num.length; i++) {

                html += '<li class="mui-table-view-cell">' +
                    '<div class="zy_media">' +
                    '<video poster="'+num[i].imgsrc+'" data-config=\'{"mediaTitle": "' + num[i].name + '"}\'  webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow">' +
                    '<source src="' + num[i].video + '" type="video/mp4">' +
                    '您的浏览器不支持HTML5视频' +
                    '</video>' +
                    '</div>' +
                    '</li>';

                // 《超人总动员》--腾讯视频
            }
            html += '</ul>';
            setTimeout(function () {

                item.querySelector('.box').innerHTML = html;
                zymedia('video');

                pageStatus();

            }, 500);
        }
    };


    // 判断用户是否在阅读
    /*var outTime = 15; //秒 大约等于10s，最大停留无操作时间
    var inTime = 0;//正常看了多少时间 单位:s
    var activationState = 1;//等于0是页面激活状态,等于1是页面未激活状态
    var completeTime = 20;//阅读新闻完成的时间
    var fullTimeState = 0;//新闻最多赚取阅读宝的封顶时间状态,0为未封顶,1为封顶
    var fullTimeNub = 60;//新闻最多赚取阅读宝的封顶时间单位:s
    var goldNowClss = 0;//当前阅读宝所处的百分比
    var goldactivation = 0;//当前阅读宝赚取的次数
    var animationnub = '0%';//动画的当前进度
    var longtimealert = 0;//阅读当前文章的时间大于fullTimeNub的弹窗状态
    var animationmaxnub = 0;//动画的进度最大值，为10，下面做了判断
    var userbalance = 10;//用户的阅读宝余额*/

    function pageStatus() {

        /*$("video").on('waiting',function () {
            console.log('视频卡住了，肯定是你网速不行');
            voidbuffertime++;
            activationState = 1;

        });*/


        //页面激活事件
        /*$("video").on('play',function () {
            activationState = 0;
        });
*/
        /* $("video").on('seeking',function () {
             console.log('你是怎么找到我的');
         });*/
        /*$("video").on('error',function () {
            activationState = 0;
            alert('未知错误,请刷新重试');
        });*/

        // 当视频播放位置已经改变时触发
        $("video").on('timeupdate',function () {

            // currentTimeonTrackedVideoFrame(this.currentTime, this.duration);

        });


        //页面关闭事件
        $("video").on('pause',function () {
            activationState = 1;
        });


    }

    function onTrackedVideoFrame(currentTime, duration){

        // var a=currentTime/duration;

        /*$('.gold-coin-box')
        var b=(a*100).toFixed(0)+"%";
        $("#hy").text(b);
        if(currentTime==duration){
            $("#pro").text("(已完成)");
        }*/
    }



    /*mui.toast('用户的阅读宝余额为' + userbalance);

    function go() {
        if (activationState == 0) {
            if (inTime < fullTimeNub) {
                inTime++;
                if (animationmaxnub < 10) {
                    animationmaxnub++;
                    if (animationmaxnub == 10) {
                        animationnub = animationmaxnub * 10 + '%';

                        goldactivation++;
                        userbalance += 10;
                        $('.gold-coin-box').addClass('animated flipInY');
                        setTimeout(function () {
                            $('.gold-coin-box').removeClass('animated flipInY');
                        }, 500)
                        mui.toast('加10阅读宝,已经加了' + goldactivation + '次,余额为' + userbalance);
                        $(".gold-coin-bo-c").animate({
                            height: animationnub
                        }, 500);
                        animationmaxnub = 0;

                    } else {
                        animationnub = animationmaxnub * 10 + '%';
                        $(".gold-coin-bo-c").animate({
                            height: animationnub
                        }, 500);

                    }

                }
            } else if (longtimealert == 0) {
                mui.toast('这篇文章看很久了，换一篇吧~');
                longtimealert = 1;
                $(".gold-coin-bo-c").animate({
                    height: animationnub
                }, 500);
            }

            console.log(inTime);
        }
        setTimeout(go, 1000);
    };

    setTimeout(go, 1000);*/


</script>
</body>

</html>